<div class="style-panel">
    <div class="farris-group-wrap property-item">
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap" (click)="onChangeMarginDetailPanel()">
                    <span class="f-icon f-icon-arrow-60-right mr-1" *ngIf="!showMarginDetail"> </span>
                    <span class="f-icon f-icon-arrow-60-down mr-1" *ngIf="showMarginDetail"> </span>
                    <span class="farris-label-text">{{marginName}}</span>
                </div>
            </label>
            <div class="component">
                <div class="farris-input-wrap">
                    <farris-combo-list [(ngModel)]="marginData.type" [idField]="'value'" [textField]="'text'"
                        [data]="presettingMarginList" [editable]="false" [multiSelect]="false" [enableClear]="false"
                        [enableCancelSelected]="false" [nosearch]="false" (ngModelChange)="onChangeMarginType()">
                    </farris-combo-list>
                </div>
            </div>
        </div>
    </div>

    <div class="farris-group-wrap property-item detail-panel" [hidden]=" !showMarginDetail">
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap"> <span class="farris-label-text"></span>上间距(px) </div>
            </label>
            <div class="component">
                <div class="farris-input-wrap">
                    <farris-number-spinner [(ngModel)]="marginData.marginTop" [precision]="0" [min]="0" [max]="30"
                        [canNull]="true" (ngModelChange)="onChangeSingleMargin()" placeholder=" ">
                    </farris-number-spinner>
                </div>
            </div>
        </div>
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap"><span class="farris-label-text"></span>右间距(px)</div>
            </label>
            <div class="component">
                <div class="farris-input-wrap">
                    <farris-number-spinner [(ngModel)]="marginData.marginRight" [precision]="0" [min]="0" [max]="30"
                        [canNull]="true" (ngModelChange)="onChangeSingleMargin()" placeholder=" ">
                    </farris-number-spinner>
                </div>
            </div>
        </div>
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap"><span class="farris-label-text"></span>下间距(px)</div>
            </label>
            <div class="component">
                <div class="farris-input-wrap">
                    <farris-number-spinner [(ngModel)]="marginData.marginBottom" [precision]="0" [min]="0" [max]="30"
                        [canNull]="true" (ngModelChange)="onChangeSingleMargin()" placeholder=" ">
                    </farris-number-spinner>
                </div>
            </div>
        </div>
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap"><span class="farris-label-text"></span>左间距(px)</div>
            </label>
            <div class="component">
                <div class="farris-input-wrap">
                    <farris-number-spinner [(ngModel)]="marginData.marginLeft" [precision]="0" [min]="0" [max]="30"
                        [canNull]="true" (ngModelChange)="onChangeSingleMargin()" placeholder=" ">
                    </farris-number-spinner>
                </div>
            </div>
        </div>
    </div>
</div>